import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

import './style.less'

const Button = (props) => {
  const { children, type, text, ...rest } = props

  let classes = classnames('my-button', {
    'my-btn-secondary': type === 'secondary',
    'my-btn-primary': type === 'primary'
  })

  if (text) {
    return (
      <span className="my-btn" {...rest}>
        {props.children}
      </span>
    )
  }

  return (
    <button className={classes} {...rest}>
      {children}
    </button>
  )
}

Button.propTypes = {
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]).isRequired,
  type: PropTypes.oneOf(['primary', 'secondary']),
  text: PropTypes.bool
}

Button.defaultProps = {
  type: 'primary'
}

export default Button
